<template>
  <div class="search-item">
    <el-popover
      placement="bottom"
      width="475"
      :virtual-ref="buttonRef"
      ref="popoverRef"
      trigger="click"
      virtual-triggering
      :visible-arrow="false"
      style="padding-top: 0"
      v-model="visible"
    >
      <div class="search-content">
        <div :class="'search-hot ' + (historySearch.length > 0 ? 'mt' : '')">
          <span class="title">大家都在搜</span>
          <ul class="hot-list">
            <li v-for="(item, index) in HotNameArr.slice(0, 10) as any" :key="index" class="hot-item">
              <span
                v-if="index < 3"
                class="top"
                :style="{
                  backgroundColor: index === 0 ? '#fa5151' : index === 1 ? '#ff8f1f' : '#ffc300',
                  margin: '3px'
                }"
              >
                {{ index + 1 }}
              </span>
              <span style="background-color: #dedfdf; color: #fff; border-radius: 3px; margin: 3px" v-else>
                {{ index + 1 }}
              </span>
              <span @click="handleSearch(item.realName)">{{ item.realName }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-popover>

    <el-input
      ref="buttonRef"
      :placeholder="tipsWord"
      style="width: 500px"
      clearable
      v-click-outside="onClickOutside"
      @keyup.enter.native="searchRequest"
      v-model="search"
      :suffix-icon="Search"
    >
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref } from 'vue';
import { ClickOutside as vClickOutside } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
const props = defineProps({
  HotNameArr: {
    type: Array,
    default: () => []
  }
});
const buttonRef = ref();

const popoverRef = ref();
const onClickOutside = () => {
  visible.value = true;
  unref(popoverRef).popperRef?.delayHide?.();
};
const emit: any = defineEmits(['queryName']);
const visible = ref(false);
const isMouseOver = ref(false);
const search = ref('');
const tipsWord = ref('');

const historySearch = ref([]);
const items = ref(['请输入模板标题', '行政人事', '个人']);

const searchRequest = () => {
  emit('queryName', search.value);
};

const clear = () => {
  search.value = '';
};

const handleSearch = (word: any) => {
  search.value = word;
  emit('queryName', word);
};
const clearHistory = () => {
  historySearch.value = [];
};

onMounted(() => {
  tipsWord.value = items.value[0];
});

defineExpose({
  //调用组件需要导出 v-model的变量
  clear,
  clearHistory
});
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
  background-color: #fff !important;
  border: 0 !important;
}

.search-item :deep(.el-input .el-input__inner) {
  border-radius: 8px !important;
}

.search-content span.title {
  display: inline-block;
  font-size: 14px;
  color: #999999;
  /* font-weight: bold; */
}

.search-content .search-his span.clear {
  float: right;
  cursor: pointer;
}

.search-content .search-his span.clear:hover {
  color: #00aeec;
}

.search-content .mt {
  margin-top: 10px;
}

.search-content .search-hot {
  width: 100%;
}

.search-content .search-hot ul.hot-list {
  width: 100%;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  margin-top: 5px;
  list-style: none;
}

.search-content .search-hot ul.hot-list li.hot-item {
  width: 50%;
  height: 30px;
  font-size: 15px;
  display: flex;
  cursor: pointer;
  align-items: center;
}

.search-content .search-hot ul.hot-list li.hot-item span:first-child {
  width: 10%;
  color: #999999;
  text-align: center;
  display: inline-block;
}

.search-content .search-hot ul.hot-list li.hot-item span:last-child {
  margin-left: 5px;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-content .search-hot ul.hot-list li.hot-item span.top {
  color: #fff;
  border-radius: 3px;
}

.search-content .search-hot ul.hot-list li.hot-item:hover {
  background-color: #f2f2f2;
}
</style>
